<template>
  <view class="container">
    <image class="logo" src="/static/logo.png"></image>
    <view class="login-form">
      <view class="login-form__input">
        <up-input v-model="userForm.username" placeholder="用户名" type="text" shape="circle" border="none"
                  :maxlength="10" :customStyle="{padding: '8px 18px', backgroundColor: '#ffffff'}"></up-input>
      </view>
      <view class="login-form__input">
        <up-input v-model="userForm.password" placeholder="密码" password shape="circle" border="none"
                  :maxlength="14" :customStyle="{padding: '8px 18px', backgroundColor: '#ffffff'}">
        </up-input>
      </view>
      <view class="login-form__input">
        <up-input v-model="userForm.confirmPassword" placeholder="确认密码" password shape="circle"
                  :maxlength="14" border="none" :customStyle="{padding: '8px 18px', backgroundColor: '#ffffff'}">
        </up-input>
      </view>
	  <view class="login-submit">
	    <up-button type="primary" text="立即注册" :customStyle="{padding: '8px 18px', borderRadius: '25px'}"
	               @click="submit()"></up-button>
	  </view>
    </view>
  </view>

  <up-toast ref="toast"></up-toast>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {register} from '@/api/login';
import {pages} from '@/utils/page-url';

let userForm = reactive({
  username: '',
  password: '',
  confirmPassword: ''
});

const toast = ref();

const submit = async () => {
  if (!userForm.username) {
    toast.value.show({
      type: 'warning',
      message: '用户名不能为空',
      duration: 1500,
      position: 'top'
    })
    return;
  }
  if (!userForm.password) {
    toast.value.show({
      type: 'warning',
      message: '密码不能为空',
      duration: 1500,
      position: 'top'
    })
    return;
  }
  if (!userForm.confirmPassword) {
    toast.value.show({
      type: 'warning',
      message: '确认密码不能为空',
      duration: 1500,
      position: 'top'
    })
    return;
  }
  // @ts-ignore
  if (!uni.$u.test.enOrNum(userForm.username)) {
    toast.value.show({
      type: 'warning',
      message: '用户名只能是英文和数字',
      duration: 1500,
      position: 'top'
    })
    return;
  }
  if (userForm.confirmPassword !== userForm.password) {
    toast.value.show({
      type: 'warning',
      message: '两次密码输入不一致',
      duration: 1500,
      position: 'top'
    })
    return;
  }
  const params: any = JSON.parse(JSON.stringify(userForm));
  const {code, msg}: any = await register(params);
  toast.value.show({
    type: 'loading',
    message: "正在加载",
    duration: 500,
    complete() {
      if (code === 200) {
        // @ts-ignore
        uni.$u.route({
          type: 'redirect',
          url: pages.login
        })
        userForm = reactive({
          username: '',
          password: '',
          confirmPassword: ''
        });
      } else {
        toast.value.show({
          type: 'error',
          message: msg,
          duration: 1500,
          position: 'top'
        })
      }
    }
  })
}
</script>

<style lang="scss">
.logo {
  height: 150rpx;
  width: 150rpx;
  margin-top: 50rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;

  &__input {
    margin: 20rpx 0;
    width: 70%;
    filter: drop-shadow(1px 2px 8px #e3e3e3);
  }
}

.login-submit {
  width: 70%;
  margin-top: 50rpx;
  filter: drop-shadow(1px 2px 8px #e3e3e3);
}
</style>
